import React, { Component } from 'react';
import { NavBar, Swiper } from 'antd-mobile';
import { TravelOutline, UserOutline, StarOutline } from 'antd-mobile-icons'
import { get_goodinfo } from '../utils/api'
import { Toast } from 'antd-mobile'
// import { store } from '../store/index';
import { create_collect_action, create_collect_action_delet, create_add_cart } from '../store/actionCreator'
import { connect } from 'react-redux'
class Detail extends Component {

    state = {
        goodinfo: {}
    }

    componentDidMount() {
        get_goodinfo({ goodid: this.props.location.state.id }).then((res) => {
            // console.log(res.data);
            if (res.data.code === 400) {
                Toast.show({ icon: 'fail', content: res.data.msg });
                setTimeout(() => {
                    this.props.history.go(-1);
                }, 3000)
            } else {
                this.setState({
                    goodinfo: res.data.goodinfo
                })
            }
        })
        //监听store的改变(只要store发生改变，该回调函数一定会立即执行)
        //store.subscribe()的返回值是一个函数，用来取消监听
        // this.unsubscribe = store.subscribe(() => {

        //     this.setState({});//触发组件更新
        // })
    }

    // componentWillUnmount() {
    //     this.unsubscribe();//取消监听
    // }


    iscollect() {//判断当前详情页的商品是否已收藏
        //拿到store中的收藏列表，判断当前详情页的商品是否在收藏列表中
        let index = this.props.collectlist.findIndex((item) => {
            return item.id == this.state.goodinfo.id;
        })
        return index != -1;
    }

    collect() {//执行收藏或取消收藏
        //触发动作
        if (this.iscollect()) {//已收藏
            //触发同步action
            // store.dispatch(delete_create_collect(this.state.goodinfo))
            //触发异步action
            // store.dispatch(create_collect_action_delet(this.state.goodinfo))
            this.props.do_cancel_collect(this.state.goodinfo);
        } else {//未收藏
            //触发同步action
            // store.dispatch(create_collect(this.state.goodinfo))
            //触发异步action
            // store.dispatch(create_collect_action(this.state.goodinfo))
            this.props.do_collect(this.state.goodinfo);

        }
    }

    goCart() {
        this.props.history.push('/index/shopcart')
    }

    addCart() {
        // store.dispatch({ type: 'ADD_CART', params: this.state.goodinfo })
        // store.dispatch(request_add_cart_action(this.state.goodinfo))
        this.props.do_add_cart(this.state.goodinfo)
    }


    render() {
        return (
            <div className='detail'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}>商品详情</NavBar>
                </div>
                <div className="img">
                    <Swiper autoplay loop indicator={(total, current) => (
                        <div className="customIndicator">
                            {`${current + 1} / ${total}`}
                        </div>
                    )}
                    >
                        {this.state.goodinfo.pics && this.state.goodinfo.pics.map((item, index) => {
                            return (
                                <Swiper.Item key={index} >
                                    <img src={item} style={{ width: "100%" }} alt="" />
                                </Swiper.Item>
                            )
                        })}
                    </Swiper>
                </div>
                <div className="info">
                    <div className='act_price'>
                        <div className='left'>
                            <p>原价{this.state.goodinfo.salesPrice && this.state.goodinfo.salesPrice.value}</p>
                            <p>活动价￥<span>{this.state.goodinfo.salesPrice && this.state.goodinfo.salesPrice.value}</span></p>
                        </div>
                        <div className="right">
                            距结束&nbsp;5&nbsp;天&nbsp;0&nbsp;小时
                        </div>
                    </div>
                    <div className="name">
                        <p>包邮包税</p>
                        <p>{this.state.goodinfo.name}</p>
                        <p>{this.state.goodinfo.name}</p>
                    </div>
                </div>
                <div className="tabbar">
                    <div onClick={() => { this.collect() }}>
                        <StarOutline fontSize={20} />
                        <p>{this.iscollect() ? '收藏' : '未收藏'}</p>
                    </div>
                    <div>
                        <TravelOutline fontSize={20} />
                        <p>分享</p></div>
                    <div onClick={() => { this.goCart() }}>
                        <UserOutline fontSize={20} />
                        <p>购物车</p>
                    </div>
                    <div className='buy'>
                        <p className='addgoodscart' onClick={() => { this.addCart() }}>加入购物车</p>
                        <p className='buyit'>立即购买</p>
                    </div>
                </div>
            </div>
        );
    }
}

//connect 负责将当前Detail组件和redux store连接起来, 当store中的数据发生改变时, 当前组件会立即更新
export default connect(
    (state) => { //将store中的数据注入到组件属性中（props）
        return {
            collectlist: state.collectlist
        }
    }, (dispatch) => {//将dispatch以防法的形式 注入到组件属性中（props）
        return {
            do_collect(params) {
                dispatch(create_collect_action(params))//创建
            },
            do_cancel_collect(params) {
                dispatch(create_collect_action_delet(params))//删除
            },
            do_add_cart(params) {
                dispatch(create_add_cart(params))//购物车+1
            },

        }
    })(Detail);